<template>
  <div style="padding:30px;">
    <!-- <el-alert :closable="false">
      <router-view />
    </el-alert>-->
    <div class="block" style="margin-bottom:20px">
      <!-- <span class="demonstration">请选择级别:</span> -->

      <el-select v-if="qx.level>3" @change="slfgs" v-model="uid" placeholder="请选择分公司">
        <el-option label="全部" :value="-1"></el-option>
        <el-option v-for="item in coms" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <el-select v-if="qx.level>2" @change="slbm" v-model="bid" placeholder="请选择部门">
        <el-option label="全部" :value="-1"></el-option>
        <el-option v-for="item in coms1" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <el-select v-if="qx.level>1" @change="slry" v-model="staff" placeholder="请选择人员">
        <el-option label="全部" :value="-1"></el-option>
        <el-option v-for="item in person1" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <el-select @change="xmtype" v-model="itemType" placeholder="请选择项目类型">
        <el-option label="全部" :value="-1"></el-option>
        <el-option label="安全评价" :value="1"></el-option>
        <el-option label="职卫评价" :value="2"></el-option>
        <el-option label="安全咨询" :value="3"></el-option>
        <el-option label="安全检查" :value="4"></el-option>
        <el-option label="检测检验" :value="5"></el-option>
      </el-select>
      <!-- <span class="demonstration" style="margin-left:20px">时间范围:</span> -->
      <el-date-picker
        @change="dateChange"
        v-model="datatime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
    </div>
    <div class="block" style="margin-bottom:20px;display:flex;justify-content:space-between">
      <div class="demonstration">
        <el-button @click="print" type="primary" size="mini" style="margin:30px auto;">打印</el-button>
        <el-button type="primary" size="mini" style="margin:30px auto;">导出</el-button>
        <el-button type="primary" size="mini" style="margin:30px auto;">历史数据</el-button>
      </div>
      <div class="demonstration;" style="align:right">{{nowdata}}</div>
    </div>
    <el-table ref="print" :data="tableData" border style="width: 100%;align" v-loading="loading">
      <el-table-column align="center" label="企业名称" prop="name"></el-table-column>
      <el-table-column align="center" label="合同编号" prop="conNumber"></el-table-column>
      <el-table-column align="center" label="项目类型" prop="pro_type"></el-table-column>
      <el-table-column align="center" label="项目负责人" prop="proPrincipalName"></el-table-column>
      <el-table-column align="center" label="项目部门" width="180" prop="proDepartment"></el-table-column>
      <el-table-column align="center" label="分公司名称" prop="proDepartment"></el-table-column>
      <el-table-column align="center" label="提成比例" width="180" prop="ratio"></el-table-column>
      <el-table-column align="center" label="应得提成" width="180" prop="acheve"></el-table-column>
      <el-table-column v-if="noprint" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="open(scope.$index, scope.row)">详情</el-button>
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <v-pagination
      style="margin-top:20px"
      @page-change="pageChange"
      @page-size-change="pageSizeChange"
      :total="total"
      :page-size="pageSize"
      :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
    ></v-pagination>
    <el-dialog title="详情" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="ruleForm" class="aaaa">
        <el-form-item label="企业名称" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.conNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.pro_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.proPrincipalName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分公司名称" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.pro_department" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="项目部门" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.proDepartment" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="提成比例" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.ratio" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="应得提成" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="ruleForm.acheve" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<!-- 引入组件库 -->

<script>
import { hqfgs } from "@/api/zuzhijiagou";
import { getToken, gettype, getid } from "@/utils/auth";
import request from "@/utils/request";
import { ymd, ym } from "@/api/date";
export default {
  name: "DragTable",

  data() {
    return {
      noprint: true,
      nowdata: ymd(),
      datatime: [],
      loading: true,
      formLabelWidth: "120px",
      dialogFormVisible: false,
      list: null,
      pm: {
        cid: "",
        page: 1,
        pageSize: 10
      },

      loading: false,
      pageIndex: 1,
      pageSize: 10,
      total: 1,
      coms: [],
      coms1: [],
      person1: [],
      uid: "",
      bid: "",
      staff: "",
      itemType: "",
      tableData: [],
      ruleForm: "",
      qx: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {
    var id = getid();
    this.pm.cid = id;
    this.selectdown();
    this.getqx();
  },
  methods: {
    findList() {
      var that = this;
      var resdata = {
        cid: this.pm.cid,
        uid: that.uid,
        pid: that.bid,
        staff: that.staff,
        itemType: that.itemType,
        page: this.pageIndex,
        pageSize: this.pageSize,
        tokens: getToken(),
        startTime: this.datatime[0] == "" ? "" : this.datatime[0],
        endTime: this.datatime[1] == "" ? "" : this.datatime[1]
      };
      // 模拟后台接口
      this.loading = true;
      request(`/manage/selectachieve`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: resdata
      }).then(function(response) {
        console.log(response);
        that.tableData = response.data.object;
        console.log(111111);

        that.total = response.data.total;
        that.loading = false;
        // that.$message({
        //   type: "success",
        //   message: "加载成功!"
        // });
      });
    },
    print() {
      this.noprint = false;
      console.log(this.noprint);
      // this.w = this.wp;
      setTimeout(() => {
        this.$print(this.$refs.print);
      }, 500);
      setTimeout(() => {
        this.noprint = true;
        // this.w = this.wf;
      }, 1500);
    },
    selectdown() {
      console.log(this.datatime);
      var that = this;
      var p = {
        tokens: getToken()
      };
      request(`branch/selectdown`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.coms = response.data.object;
            // that.uid = response.data.object[0].id;
            that.findList();
          } else {
            that.fail = true;
            that.failc = response.message;
          }
        })
        .catch(error => {
          console.log(error); //异常
        });
    },
    selectdown1(a) {
      console.log("add");
      var that = this;
      var p = {
        tokens: getToken(),
        bid: a
      };
      request(`department/selectComboBox`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.coms1 = response.data.object;
          } else {
            that.fail = true;
            that.failc = response.message;
          }
        })
        .catch(error => {
          this.loading = false;
          that.fail = true;
          that.failc = response.message;
          console.log(error); //异常
        });
    },
    selectdown2(a) {
      console.log("add");
      var that = this;
      var p = {
        tokens: getToken(),
        bid: this.bid,
        pid: a
      };
      request(`person/selectComboBox`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.person1 = response.data.object;
          } else {
            that.fail = true;
            that.failc = response.message;
          }
        })
        .catch(error => {
          this.loading = false;
          that.fail = true;
          that.failc = response.message;
          console.log(error); //异常
        });
    },
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.findList();
      console.log(pageIndex);
    },
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.findList();
    },
    open(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.ruleForm = row;
    },
    slfgs(selVal) {
      this.uid = selVal;
      this.bid=""
      console.log(selVal);
      this.findList();
      this.selectdown1(selVal);
      // this.dialogVisible = true;
    },
    slbm(selVal) {
      this.bid = selVal;
      this.staff=""
      this.findList();
      this.selectdown2(selVal);
      // this.dialogVisible = true;
    },

    xmtype(selVal) {
      this.itemType = selVal;
      this.findList();
      // this.dialogVisible = true;
    },

    slry(selVal) {
      this.staff = selVal;
      this.findList();
      // this.dialogVisible = true;
    },
    dateChange() {
      this.findList();
    },
    getqx() {
      var that = this;
      var p = {
        tokens: getToken()
      };
      request(`person/rolelist`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.qx = response.data.object;
            console.log(that.qx.level);
            var level = that.qx;

            if (level == 4) {
              that.pm.cid = level.cid;
            } else if (level == 3) {
              that.pm.cid = level.cid;
              that.uid = level.bid;
            } else if (level == 2) {
              that.pm.cid = level.cid;
              that.uid = level.bid;
              that.bid = level.pid;
            } else if (level == 1) {
              that.pm.cid = level.cid;
              that.uid = level.bid;
              that.bid = level.pid;
            }
          } else {
            that.fail = true;
          }
        })
        .catch(error => {
          console.log(error); //异常
        });
    }
  }
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
.el-alert__content {
  width: 100%;
}
.aaaa input {
  disabled: "disabled";
}
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
/* .el-alert__content {
  width: 50%;
} */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-alert__content {
  width: 100%;
}
</style>
